<template>
  <div id="app">
    <div class='qualityManual-container'>
      <div>
        <button style='width: 120px;' type='primary' @click='getFile'>测试预览office文档</button>
        <button style='width: 120px;' type='primary' @click='close'>关闭</button>
      </div>
      <div v-if='show' class='qualityManual-container-office'>
        <vab-only-office :option='option' />
      </div>
    </div>
  </div>
</template>

<script>
import vabOnlyOffice  from './tool/onlyoffice'

export default {
  name: 'App',
  components: {
    vabOnlyOffice
  },
  data() {
    return {
      //参考vabOnlyOffice组件参数配置
      option: {
        url: '',
        isEdit: '',
        fileType: '',
        title: '',
        lang: '',
        isPrint: '',
        user: { id:null,name:''}
      },
      show: false,
    }
  },
  methods: {
    getFile() {
      this.show = true
      // getAction('/file/selectById', { id: this.id }).then(res => {
      this.option.isEdit = false
      this.option.lang = 'zh-CN'
      this.option.url = 'http://114.55.57.126:9000/zyt/6a668b04-7e51-444c-a1be-7719d40acda2.docx'
      this.option.title = '123'
      this.option.fileType = 'docx'
      this.option.isPrint = false
      this.option.user= { id:12,name:'张三'}
      // })
    },
    close() {
      this.show = false
    },
  },
}
</script>

<style>
/*html,body{*/
/*  height:100%;*/
/*}*/
/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  height:100%;*/

/*}*/
/*.qualityManual-container {*/
/*  padding: 0 !important;*/
/*  height:100%;*/
/*}*/
/*.qualityManual-container-office {*/
/*  width: 100%;*/
/*  height: calc(100% - 55px);*/
/*}*/
</style>

